<template>
  <div class="u-login-page">
    <div>
      <a-row>
        <a-col
          :xs="{
            span: 18,
            offset: 3,
          }"
          :sm="{
            span: 16,
            offset: 4,
          }"
          :md="{
            span: 14,
            offset: 5,
          }"
          :lg="{
            span: 10,
            offset: 7,
          }"
          :xl="{
            span: 8,
            offset: 8,
          }"
        >
          <a-typography-title :level="2" class="u-text-center"
            >Crazy POS</a-typography-title
          >
          <div class="u-table-repo">
            <a-typography-title :level="4" class="u-text-center"
              >登录</a-typography-title
            >
            <a-form
              layout="vertical"
              :model="formState"
              name="normal_login"
              class="login-form"
              @finish="onFinish"
              @finishFailed="onFinishFailed"
            >
              <a-form-item
                label="账号"
                name="username"
                :rules="[
                  { required: true, message: 'Please input your username!' },
                ]"
              >
                <a-input v-model:value="formState.username">
                  <template #prefix>
                    <!-- <UserOutlined class="site-form-item-icon" /> -->
                  </template>
                </a-input>
              </a-form-item>

              <a-form-item
                label="密码"
                name="password"
                :rules="[
                  { required: true, message: 'Please input your password!' },
                ]"
              >
                <a-input-password v-model:value="formState.password">
                  <template #prefix>
                    <!-- <LockOutlined class="site-form-item-icon" /> -->
                  </template>
                </a-input-password>
              </a-form-item>

              <div class="login-form-wrap">
                <a-form-item name="remember" no-style>
                  <a-checkbox v-model:checked="formState.remember"
                    >记住登录状态</a-checkbox
                  >
                </a-form-item>
                <a class="login-form-forgot u-font-14" href=""
                  >忘记密码？点击这里</a
                >
              </div>

              <a-form-item>
                <div class="u-text-right">
                  <a-button
                    :loading="loginLoading"
                    :disabled="disabled"
                    type="primary"
                    html-type="submit"
                    class="login-form-button"
                  >
                    确认
                  </a-button>
                </div>
              </a-form-item>
            </a-form>
          </div>
        </a-col>
      </a-row>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { computed, reactive, ref } from "vue";
import _get from "lodash/get";
import AuthService from "@service/auth";
import { useStore } from "@/store";
import { useRouter } from "vue-router";
interface FormState {
  username: string;
  password: string;
  remember: boolean;
}

const router = useRouter();

const store = useStore();

const loginLoading = ref<boolean>(false);

const formState = reactive<FormState>({
  username: "",
  password: "",
  remember: true,
});
const onFinish = (values: any) => {
  userLogin();
};

const onFinishFailed = (errorInfo: any) => {
  console.log("Failed:", errorInfo);
};
const disabled = computed(() => {
  return !(formState.username && formState.password);
});

const userLogin = () => {
  loginLoading.value = true;
  AuthService.userLogin({
    username: formState.username,
    password: formState.password,
  })
    .then((res) => {
      store.commit("userModule/setUserToken", res.data.Authorization);
      store.commit("userModule/setLoginUserInfo", res.data.userInfo);

      store.commit(
        "setShownNavMenus",
        _get(res, "data.userInfo.navMenus") || []
      );
      console.log(res);
      router.push({
        path: "/",
      });
    })
    .finally(() => {
      loginLoading.value = false;
    });
};
</script>
<style lang="less" scoped>
@import "./index.less";
</style>
